<Home-Content-Tpl>
  <div home-title></div>
  <div home-toolbar></div>
  <div class="main"
       home-main>
    <div class="column">
      <div class="example-container">
        <h2>角色列表</h2>
        <div>
          <mat-list>
            <mat-list-item [ngClass]="{'role-active': activedRoleIndex === i}"
                           (click)="activeRole(i)"
                           style="cursor: pointer;"
                           *ngFor="let item of roles; let i=index">
              {{ item }}
              <mat-divider> </mat-divider>
            </mat-list-item>
          </mat-list>

        </div>
      </div>
    </div>
    <div class="column">
      <div class="example-container">
        <h2>已有权限</h2>
        <div cdkDropList
             #todoList="cdkDropList"
             [cdkDropListData]="granted"
             [cdkDropListConnectedTo]="[doneList]"
             class="example-list"
             (cdkDropListDropped)="drop($event)">
          <div class="example-box"
               *ngFor="let item of granted"
               cdkDrag>{{item}}</div>
        </div>
      </div>

      <div class="example-container">
        <h2>权限列表</h2>

        <div cdkDropList
             #doneList="cdkDropList"
             [cdkDropListData]="ungranted"
             [cdkDropListConnectedTo]="[todoList]"
             class="example-list"
             (cdkDropListDropped)="drop($event)">
          <div class="example-box"
               *ngFor="let item of ungranted"
               cdkDrag>{{item}}</div>
        </div>
      </div>
    </div>
  </div>
</Home-Content-Tpl>
